<template>
  <div class="hello">
    <div id="centerMap" ref="centerMap" />
  </div>
</template>

<script>
import shangrao from "../assets/shangrao.json";
export default {
  data() {
    return {
      chart: undefined,
      //data增加echarts需要的otions设置
      options: {
        animation: false,
        //geo方式地理坐标系组件。
        geo: {
          map: "shangrao",
          zoom: 1.2,
          show: true,
          selectedMode: true,
          label: {
            show: true,
            color: "#fff",
            fontSize: 15,
            // 高亮状态下的多边形和标签样式。
          },
          roam: true, //是否允许缩放
          itemStyle: {
            normal: {
              color: "rgba(51, 69, 89, .5)", //地图背景色
              borderColor: "#516a89", //省市边界线00fcff 516a89
              borderWidth: 1,
            },
          },
        },
        series: [
          {
            type: "map",
            map: "shangrao",
            roam: true, //是否开启鼠标缩放和平移漫游
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            label: {
              normal: {
                show: true, //显示省份标签
                textStyle: { color: "#fff" }, //省份标签字体颜色
              },
              emphasis: {
                //对应的鼠标悬浮效果
                show: true,
                textStyle: { color: "#70ccef" },
              },
            },
            data: [
              { name: "婺源县", num: "23617", money:"2121"},
              { name: "德兴市", num: "75675", money:"345" },
              { name: "玉山县", num: "78978", money:"89"},
               { name: "信州区", num: "78978", money:"789" },
              { name: "广丰区",  num: "2323", money:"345" },
              { name: "广信区", num: "346565", money:"435" },
               { name: "横峰县", num: "23545", money:"8768" },
              { name: "铅山县",  num: "6774", money:"566" },
              { name: "弋阳县",  num: "56565", money:"234" },
               { name: "万年县",  num: "454", money:"5656" },
              { name: "余干县",  num: "23423", money:"234" },
              { name: "鄱阳县", num: "55234", money:"2121"},
            ],
          }
        ],
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,0.4)", // 提示框浮层的背景颜色。
          axisPointer: {
            // 坐标轴指示器配置项。
            type: "shadow", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: "auto", // 指示器的坐标轴。
            snap: true, // 坐标轴指示器是否自动吸附到点上
          },
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#41feff",
            fontStyle: "normal",
            fontWeight: "normal",
            fontFamily: "sans-serif",
            fontSize: 14,
          },
          padding: 0, // 提示框浮层内边距，
          formatter: function (params) {
            let showname = params;
            console.log(showname.data);
            return `
                <div style='width:150px;height:150px'>
                    <p  style="width:100%;height:30px; background: linear-gradient(#2caaab, #136692);  text-align: center;line-height: 30px;">${showname.data.name}</p>
                    <p  style="line-height: 30px; text-indent: 10px;">补助人数:${showname.data.num}人</p>
                    <p style="line-height: 30px; text-indent: 10px;">补助金额:${showname.data.money}万元</p>
              </div>
              `;
          },
        },
      },
    };
  },

  methods: {
    initChart() {
      // 初始化echart
      this.chart = this.$echarts.init(this.$refs.centerMap);

      this.$echarts.registerMap("shangrao", shangrao);
      this.chart.setOption(this.options, true);
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>

<style scoped>
#centerMap {
  width: 600px;
  height: 600px;
  border: 1px solid #000;
}
</style>
